<template>
  <el-row :gutter="10">
    <el-col :md="12" :sm="24">
      <el-card :bordered="false">
        <!-- 按钮操作区域 -->
        <el-row style="margin-left: 14px">
          <el-button type="primary" @click="dialogFormVisible = true">添加机构</el-button>
          <el-dialog :visible.sync="dialogFormVisible">
            <el-form :form="form">
              <el-form-item label="名称:">
                <el-input placeholder="请输入名称" style="width:580px" />
              </el-form-item>
              <el-form-item label="编号:">
                <el-input placeholder="请输入编号" style="width:580px" />
              </el-form-item>
              <el-form-item label="上级机构">
                <el-select v-model="form.value" class="main-select-tree" style="width: 560px;">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                  <!-- <el-tree class="main-select-el-tree"  default-expand-all /> -->
                </el-select>
              </el-form-item>
              <el-form-item label="排序">
                <el-input placeholder="请输入排序" style="width:580px" />
              </el-form-item>
              <el-form-item label="备注">
                <el-input type="textarea" :rows="2" placeholder="请输入备注" style="width:580px" />
              </el-form-item>
            </el-form>
            <div class="anty-form-btn">
              <el-button type="default" html-type="button" icon="sync">重置</el-button>
              <el-button type="primary" html-type="button" icon="form">保存</el-button>
            </div>
          </el-dialog>
          <el-button title="删除多条数据" type="default" style="margin-left:10px ;">批量删除</el-button>
          <el-button type="default" icon="el-icon-refresh-right" @click="reload">刷新</el-button>
        </el-row>
        <div style="background: #fff;padding-left:16px;height: 100%; margin-top: 5px">
          <el-alert title="当前选择：" type="warning" :closable="false" effect="light" show-icon>
            <!-- <el-alert type="info" :showIcon="true" :closable="false"> -->
            <div slot="message">
              当前选择：<span />
              <el style="margin-left: 10px">取消选择</el>
            </div>
          </el-alert>
          <!-- 树-->
          <el-col :md="10" :sm="24">
            <template>
              <el-dropdown style="width:600px">
                <span style="user-select: none">
                  <el-tree
                    ref="tree"
                    :data="data"
                    show-checkbox
                    highlight-current
                    :check-strictly="true"
                    class="tree"
                    :default-expand-all="true"
                  />
                </span>
                <el-dropdown-menu />
              </el-dropdown>
            </template>
          </el-col>
        </div>
      </el-card>

      <div style="margin-top: 20px;">
        <el-dropdown class="avatar-container" trigger="click">
          <div class="avatar-wrapper">
            <el-button size="medium">树操作<i class="el-icon-arrow-up" />
            </el-button>
          </div>
          <el-dropdown-menu slot="dropdown" class="user-dropdown">
            <el-dropdown-item>父子关联</el-dropdown-item>
            <el-dropdown-item>取消关联</el-dropdown-item>
            <el-dropdown-item>全部勾选</el-dropdown-item>
            <el-dropdown-item>取消全选</el-dropdown-item>
            <el-dropdown-item>展开所有</el-dropdown-item>
            <el-dropdown-item>合并所有</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <!---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------>
    </el-col>
    <el-col :md="12" :sm="24">
      <el-card>
        <el-empty>
          <span slot="description"> 请先选择一个机构! </span>
        </el-empty>
      </el-card>
    </el-col>
    <!-- <organization-modal ref="organizationModal"></organization-modal> -->
  </el-row>
</template>
<script>

import origanizationApi from '@/api/origanization'

export default {
  data() {
    return {
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      data: [],
      dialogFormVisible: false,
      form: {
        value: ''
      }
    }
  },
  created() {
    this.initTree()
  },
  methods: {
    initTree() {
      origanizationApi.getTree().then((res) => {
        this.data = res.data
      })
    },
    reload() {
      this.initTree()
    }
  }

}
</script>

<style scoped>

</style>
